<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="Shortcut Icon" href="imgs/logo.ico"/>
    <title>佰傲嘉</title>
    <style type="text/css">
        @font-face { font-family: 'SourceHanSans'; src: url('/font/SourceHanSans-Bold.otf'); }
        @font-face { font-family: 'SourceHanSan2'; src: url('/font/SourceHanSans-Regular.otf'); }
        @font-face { font-family: 'SourceHanSan3'; src: url('/font/SourceHanSans-Light.otf'); }
        * { margin: 0; padding: 0; font-family: 'SourceHanSan3','SourceHanSan4','黑体','微软雅黑'; }
        #bg { width: 100%; height: 100%; overflow: hidden; position: absolute; top: 0  left: 0;}
        /*.bg1 { background: url(/imgs/bg.jpg) no-repeat; }*/
        /*.bg2 { background: url(/imgs/bg1.jpg) no-repeat; }*/
        /*.bg3 { background: url(/imgs/bg2.jpg) no-repeat; }*/
        #bg img { width: 100%; height: 100%; position: absolute; }
        #logo { width: 142px; height: 55px; background: url(/imgs/logo.png) no-repeat; position: absolute; top: 20px; left: 20px; }
        #banner { width: 100%; position: absolute; top: 30px; right: 20px; }
        #banner .li { padding: 0 20px; color: #fefefe; cursor: pointer; float: left; }
        #banner .li:hover { color: #00b8af; } 
        .jia { margin: 5px 10px; width: 10px; height: 10px; background: url(/imgs/+.png) no-repeat; background-size: 10px 10px; float: left; }
        /*.jia  span { position: relative; top: -5px; }*/
        #tbody { margin: 0 auto; width: 940px; height: 500px; }
        .rotate1 {
            animation-name: over;
            animation-duration: 0.4s;
            animation-iteration-count:1;
        }
        .rotate2 {
            animation-name: out;
            animation-duration: 0.4s;
            animation-iteration-count:1;
        }
        @keyframes over{
            0%{transform:rotateZ(0deg);}
            100%{transform:rotateZ(180deg);}
        }
        @keyframes out{
            0%{transform:rotateZ(0deg);}
            100%{transform:rotateZ(-180deg);}
        }
    </style>
</head>
<body>
<!-- 背景 -->
<div id="bg"></div>

<!--顶部菜单栏-->
<div id="logo"></div>
<div id="banner"></div>

<!--主体-->
<div id="tbody"></div>

<!--页脚-->
<div id="foot"></div>
</body>
</html>


<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
    var cw = document.documentElement.clientWidth;
    var ch = document.documentElement.clientHeight;
    var bgKey = 1;
    var bgs = [
        '/imgs/bg.jpg', '/imgs/bg1.jpg', '/imgs/bg2.jpg',
    ];
    (function(){
        autoBody();
        // $('#bg1').width(cw).height(ch);
        // $('#bg2').width(cw).height(ch);
        // $('#bg3').width(cw).height(ch);
        bgChange(2);
    })();
    //浏览器宽度高度监听
    window.onresize = function(){
        autoBody();
    }
    function autoBody(){
        var cw = document.documentElement.clientWidth;
        var ch = document.documentElement.clientHeight;
        //大背景
        var bg = '';
        bg += '<div style="width: '+cw+'px; height: '+ch+'px;">';
        // bg += '<div style="width: '+cw+'px; height: '+ch+'px; position: fixed;" class="bg bg1" id="bg1"></div>';
        // bg += '<div style="width: '+cw+'px; height: '+ch+'px; opacity: 0; position: fixed;" class="bg bg2" id="bg2"></div>';
        // bg += '<div style="width: '+cw+'px; height: '+ch+'px; opacity: 0; position: fixed;" class="bg bg3" id="bg3"></div>';
        bg += '<img src="/imgs/bg.jpg" id="bg1"/>';
        bg += '<img src="/imgs/bg1.jpg" style="opacity: 0;" id="bg2"/>';
        bg += '<img src="/imgs/bg2.jpg" style="opacity: 0;" id="bg3"/>';
        // bg += '<img src="'+bgs[0]+'" id="bg1"/>';
        // bg += '<img src="'+bgs[1]+'" style="opacity: 0;" id="bg2"/>';
        bg += '</div>';
        $('#bg').html(bg);
        var tops = [
            {id:1,cn:'科学技术研究院',en:'', jump:1},
            {id:2,cn:'愿景唯新实验室',en:'', jump:2},
            {id:3,cn:'生物+大会/基金会',en:'',jump:3},
        ];
        //顶部菜单
        var banner = '', i, cwBan = cw / 2;
        banner += '<div style="margin-right: 20px; float: right;">';
        for (i=0; i<tops.length; i++) {
            banner += '<div class="li" onmouseenter="bannerOver('+i+')" onmouseleave="bannerOut('+i+')" onclick="toJump('+tops[i].jump+')">';
            // banner += '<div class="jia" id="jia'+i+'"><span>+</span></div>';
            banner += '<div class="jia" id="jia'+i+'"></div>';
            // banner += '<div style="font-size: 14px; float: left;">'+tops[i].cn+'</div>';
            banner += '<div style="height: 20px; overflow: hidden; font-size: 14px; float: left;">';
            banner += '<div style="width: 100%; color: #fefefe; position: relative;" id="batxt0'+i+'">'+tops[i].cn+'</div>';
            banner += '<div style="width: 100%; color: #00b8af; position: relative;" id="batxt1'+i+'">'+tops[i].cn+'</div>';
            banner += '</div>';
            banner += '</div>';
        }
        banner += '</div>';
        $('#banner').html(banner);
        //页脚
        var foot = '';
        foot += '<div style="width: 100%; color: #FFF; font-size: 12px; position: fixed; bottom: 0;">';
        foot += '<div style="padding: 15px 25px; float: left;">';
        foot += '佰傲嘉教育 &copy; 2022 Copyright, All Rights Reserved';
        foot += '</div>';
        foot += '<div style="padding: 15px 25px; float: right;">';
        foot += '网络备案：';
        foot += '<a href="https://beian.miit.gov.cn" target="_blank" style="color: #FFF; text-decoration: none;">';
        foot += '浙ICP备2021012406号-3';
        foot += '</a>';
        foot += '</div>';
        foot += '</div>';
        $('#foot').html(foot);
        //主体
        var tbody = '', cwhz = 348, chhz = 536, cwtb = cwhz*3 + 32, chtb = 556, toptb = (ch - chtb) / 2 + 20, lefttb = (cw - cwtb) / 2;
        tbody += '<style type="text/css">#tbOut{width: '+cwtb+'px; height: '+chtb+'px; position: absolute; top: '+toptb+'px; left: '+lefttb+'px; z-index: 10;} .tbli{width: '+cwhz+'px; height: '+chhz+'px; overflow: hidden; cursor: pointer; float: left;} .tbl{margin-right: 16px;} .hezi{height: 516px; background: #FFF; opacity: 0.95; position: relative; top: 20px;} .xianOut{width: 100%; height: 3px; overflow: hidden;} .xian{width: 100%; height: 3px; position: relative; left: -370px;} .imgMask{padding: 15px; padding-bottom: 0; width: 316px; height: 199px; overflow: hidden;} .img{width: 316px; height: 199px; overflow: hidden;} .img img{width: 316px; height: 199px;} .title{margin: 20px auto; width: 280px; line-height: 25px; text-align: center; font-size: 15px; color: #4c4c4c;} .titleImg{margin: 0 auto; margin-top: 30px; width: 280px; height: 50px;} .mask{width: 316px; height: 199px; opacity: 0; position: relative; top: -199px;} .dalogo{margin-left: 110px; opacity: 0; position: relative; top: -400px;}</style>';
        tbody += '<div id="tbOut">';
        //盒子1
        tbody += '<div class="tbli tbl" onmouseenter="xianOver(1)" onmouseleave="xianOut(1)" onclick="toJump(1)">';
        tbody += '<div class="hezi" id="hezi01">';
        tbody += '<div class="xianOut">';
        tbody += '<div class="xian" style="background: #ff6900;" id="xian1"></div>';
        tbody += '</div>';
        tbody += '<div class="imgMask">';
        tbody += '<div class="img">';
        tbody += '<img src="/imgs/b1.png"/>';
        tbody += '</div>';
        tbody += '<div class="mask" id="mask1" style="background: #ff6900;"></div>';
        tbody += '<div class="dalogo" style="width: 107px; height: 106px; background: url(/imgs/dalogo2.png) no-repeat;" id="dalogo1"></div>';
        tbody += '</div>';
        tbody += '<div class="titleImg" style="background: url(/imgs/title-yjy.png) no-repeat; background-size: 280px 36px;"></div>';
        tbody += '<div class="title">专注“创新教育”<br>专注“教育创新”<br>学术研究和教育支持</div>';
        tbody += '<div style="margin: 0 auto; margin-top: 40px; width: 38px; height: 38px; overflow: hidden;">';
        tbody += '<div style="width: 40px; height: 37px; background: url(/imgs/bist-1.png) no-repeat;"></div>';
        tbody += '<div style="width: 40px; height: 37px; background: url(/imgs/bist-2.png) no-repeat; opacity: 0; position: relative; top: -37px;" id="icon01"></div>';
        tbody += '</div>';
        tbody += '</div>';
        tbody += '</div>';
        //盒子2
        tbody += '<div class="tbli tbl" onmouseenter="xianOver(2)" onmouseleave="xianOut(2)" onclick="toJump(2)">';
        tbody += '<div class="hezi" id="hezi02">';
        tbody += '<div class="xianOut">';
        tbody += '<div class="xian" style="background: #00b8af;" id="xian2"></div>';
        tbody += '</div>';
        tbody += '<div class="imgMask">';
        tbody += '<div class="img">';
        tbody += '<img src="/imgs/b2.png"/>';
        tbody += '</div>';
        tbody += '<div class="mask" id="mask2" style="background: #00b8af;"></div>';
        // tbody += '<div class="dalogo" id="dalogo2"></div>';
        tbody += '</div>';
        tbody += '<div class="titleImg" style="background: url(/imgs/title-sys.png) no-repeat; background-size: 280px 36px;"></div>';
        tbody += '<div class="title">帮教助学<br>寓教于乐<br>的实验室元宇宙</div>';
        tbody += '<div style="margin: 0 auto; margin-top: 40px; width: 38px; height: 38px; overflow: hidden;">';
        tbody += '<div style="width: 40px; height: 37px; background: url(/imgs/as-1.png) no-repeat;"></div>';
        tbody += '<div style="width: 40px; height: 37px; background: url(/imgs/as-2.png) no-repeat; opacity: 0; position: relative; top: -37px;" id="icon02"></div>';
        tbody += '</div>';
        tbody += '</div>';
        tbody += '</div>';
        //盒子3
        tbody += '<div class="tbli" onmouseenter="xianOver(3)" onmouseleave="xianOut(3)" onclick="toJump(3)">';
        tbody += '<div class="hezi" id="hezi03">';
        tbody += '<div class="xianOut">';
        tbody += '<div class="xian" style="background: #fbc500;" id="xian3"></div>';
        tbody += '</div>';
        tbody += '<div class="imgMask">';
        tbody += '<div class="img">';
        tbody += '<img src="/imgs/b3.png"/>';
        tbody += '</div>';
        tbody += '<div class="mask" id="mask3" style="background: #fbc500;"></div>';
        tbody += '<div class="dalogo" id="dalogo3" style="width: 105px; height: 104px; background: url(/imgs/dalogo.png) no-repeat;"></div>';
        tbody += '</div>';
        tbody += '<div class="titleImg" style="background: url(/imgs/title-swj.png) no-repeat; background-size: 280px 36px;"></div>';
        tbody += '<div class="title">促进学术交流<br>发现人才与项目<br>助力人才培养</div>';
        tbody += '<div style="margin: 0 auto; margin-top: 40px; width: 38px; height: 38px; overflow: hidden;">';
        tbody += '<div style="width: 40px; height: 37px; background: url(/imgs/bf-1.png) no-repeat;"></div>';
        tbody += '<div style="width: 40px; height: 37px; background: url(/imgs/bf-2.png) no-repeat; opacity: 0; position: relative; top: -37px;" id="icon03"></div>';
        tbody += '</div>';
        tbody += '</div>';
        tbody += '</div>';
        // 背景切换
        var bgTop = toptb + chtb - 100, bgLeft = (cwtb - 170) / 2;
        tbody += '<style>.bgli{width: 50px; height: 3px; background: #FFF; opacity: 0.5; cursor: pointer; float: left;} .bgli:hover,.bgliOver{ opacity: 1; }</style>';
        tbody += '<div style="width: 170px; height: 3px; position: absolute; top: '+bgTop+'px; left: '+bgLeft+'px;">';
        tbody += '<div class="bgli bgliOver" id="bgli01" onclick="bgChange(1)"></div>';
        tbody += '<div class="bgli" id="bgli02" style="margin-left: 10px;" onclick="bgChange(2)"></div>';
        tbody += '<div class="bgli" id="bgli03" style="margin-left: 10px;" onclick="bgChange(3)"></div>';
        tbody += '</div>';
        $('#tbody').html(tbody);
    }
    //鼠标上去
    function bannerOver(v) {
        var jia = $('#jia'+v), txt = $('#batxt0'+v), txt2 = $('#batxt1'+v);
        jia.addClass('rotate1').removeClass('rotate2');
        txt.stop().animate({top:-20},400);
        txt2.stop().animate({top:-20},400);
    }
    //鼠标出来
    function bannerOut(v) {
        var jia = $('#jia'+v), txt = $('#batxt0'+v), txt2 = $('#batxt1'+v);
        jia.addClass('rotate2').removeClass('rotate1');
        txt.stop().animate({top:0},400);
        txt2.stop().animate({top:0},400);
    }
    //线滑入事件
    function xianOver(v){
        $('#xian'+v).stop().animate({left:0},600);
        $('#icon0'+v).stop().animate({opacity:1},400);
        $('#hezi0'+v).stop().animate({top:0,opacity:1},400);
        $('#mask'+v).stop().animate({opacity: 0.2},400);
        $('#dalogo'+v).stop().animate({top:-348,opacity:1},800);
    }
    //线滑出事件
    function xianOut(v){
        $('#xian'+v).stop().animate({left:-370},600);
        $('#icon0'+v).stop().animate({opacity:0},400);
        $('#hezi0'+v).stop().animate({top:20,opacity:0.95},400);
        $('#mask'+v).stop().animate({opacity: 0},400);
        $('#dalogo'+v).stop().animate({top:-400,opacity:0},800);
    }
    //背景改变
    function bgChange(v){
        // console.log(v);
        if (bgKey==v) { return }
        var cw = document.documentElement.clientWidth;
        var ch = document.documentElement.clientHeight;
        var ratio = ch / cw; 
        var cw2 = cw*1.04, ch2 = cw2 * ratio, cw2top = ch - ch2, ch2left = (cw - cw2) / 2;
        var cw3 = cw*1.08,ch3 = cw3 * ratio, cw3top = ch - ch3, ch3left = (cw - cw3) / 2;
        console.log(ratio,ch,ch2,ch3,cw2top,ch2left,cw3top,ch3left);
        // $('#bg'+bgKey).stop().animate({opacity:0,width:cw2,height:ch2,left:-50,top:-50},800);
        // $('#bg'+v).stop().animate({opacity:1,width:cw,height:ch,left:0,top:0},800);
        $('#bg'+bgKey).css('z-index',0)
        $('.bgli').removeClass('bgliOver');
        $('#bgli0'+v).addClass('bgliOver');
        $('#bg'+v).css('opacity',1).css('width',cw).css('height',ch).css('left',0).css('top',0).css('z-index',-10); 
        $('#bg'+v).stop().animate({width:cw2,height:ch2,top:cw2top,left:ch2left},5000,'linear');
        $('#bg'+bgKey).stop().animate({width:cw2,height:ch2,top:cw2top,left:ch2left},5000,'linear');
        $('#bg'+bgKey).stop().animate({width:cw3,height:ch3,top:cw3top,left:ch3left,opacity:0},5000,'linear');
        bgKey = v;
    }
    setInterval(function(){
        var bgIndex = bgKey==3 ? 1 : bgKey+1;
        bgChange(bgIndex);
    },5000);
    // 去研究院
    function toJump(v){
        if (v==1) {
            alert('准备中..'); return
        } else if (v==2) {
            window.location.href = 'http://test.bioplus-edu.com';
        } else {
            window.location.href = 'http://test.bioplus.org.cn';
        }
    }
</script>